<template>
	<view class="content">
		<view class="points">
			<view class="points__info">
				<view class="text">当前积分</view>
				<view class="num">{{currentPoints}}</view>
			</view>
			<view class="icon icon-gengduo1 points__arrow"></view>
		</view>

		<view class="points-input">
			<input type="number" v-model="pointsVal" placeholder="请输入兑换积分数量"/>
			<view class="text1">1积分可兑换0.01元人民币,每次提取须满1元</view>
			<view class="text2">每日最多可以提现20元。所有提现将在24小时内到账,请注意查收。</view>
		</view>

		<view class="pay-type">
			<view class="text1">选择到账方式</view>
		</view>
		
		<view class="exchange">
			<view @tap="exchange" class="exchange-botton">确认兑换</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPoints: 100,
				pointsVal: null,
			}
		},
		methods: {
			exchange() {
				console.log(this.pointsVal)
			}
		}
	}
</script>

<style>
	.points {
		border: 1rpx solid #ebebeb;
		text-align: center;
		position: relative;
	}

	.points__info {
		padding: 40rpx 0;
	}

	.points__info .text {
		color: #888888;
		font-size: 24rpx;
		line-height: 48rpx;
	}

	.points__info .num {
		font-size: 40rpx;
		line-height: 52rpx;
	}

	.points__arrow {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 180rpx;
		line-height: 180rpx;
		text-align: center;
		font-size: 48rpx;
		color: #888888;
	}

	.points-input {
		padding: 30rpx;
		border-bottom: 1rpx solid #ebebeb;
	}

	.points-input>input {
		background: #e6e6e6;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		height: 48rpx;
		min-height: 48rpx;
		line-height: 48rpx;
		border-radius: 34rpx;
		margin-bottom: 20rpx;
	}

	.points-input .text1 {
		font-size: 24rpx;
		line-height: 1.5;
	}

	.points-input .text2 {
		font-size: 24rpx;
		line-height: 1.5;
		color: #e24848;
	}
</style>
